<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			ul{
				list-style: none;
				width: 600px;
				height: 600px;
				border: 1px solid #000;
				margin: 100px auto;
				display: flex;
			 
			}
			ul>li{
				width: 100px;
				height: 100px;
				line-height: 100px;
				text-align: center;
				font-size: 30px;
		 
				
			}
			ul>li:nth-child(1){
				/* 
				 如果在伸缩容器中使用align-items来控制伸缩项的对齐方式,
				 是一次性控制所有的伸缩项的对齐方式
				 如果想要单独控制某个伸缩项在侧轴上的对齐方式 
				 那么需要将控制对齐方式的属性设置到伸缩项中去
				 	align-items 写到伸缩容器中/控制所有伸缩项
					align-self   写到伸缩项中/控制编写对应代码的伸缩项
					
					
					
					align-self  和 align-items取值是一样的
				 */
				align-self: flex-end;
				background-color: red;
			}
			
			ul>li:nth-child(2){
				align-self: center;
				background-color: green;
			 
			}
			
			ul>li:nth-child(3){
				align-self: flex-start;
				background-color: blue;
			}
			
			
		</style>
	</head>
	<body>
		
		<ul>
			<li>yz</li>
			<li>xt</li>
			<li>op</li>
		</ul>
		
		
	</body>
</html>